<script setup lang="ts">
const props = defineProps({
  content: String,
  error: {
    required: false,
    type: Boolean,
    default: false,
  },
});
</script>

<template>
  <div class="chat-human">
    <a-avatar :size="32" :style="{ backgroundColor: '#3370ff' }" shape="square">
      <icon-user />
    </a-avatar>
    <p class="chat-content">
      {{ props.content }}
      <a-tooltip v-if="error" content="消息发送失败" position="top">
        <a-avatar
          class="tips"
          :size="18"
          :style="{ backgroundColor: '#ff6c6c' }"
        >
          !
        </a-avatar>
      </a-tooltip>
    </p>
  </div>
</template>

<style scoped>
.chat-human {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px;
  margin-bottom: 5px;
  font-size: 14px;
  background-color: rgb(231, 231, 231, 0.3);
  border-radius: 8px;

  .chat-content {
    position: relative;
    flex: 1;
    width: 100%;
    margin: auto;
    line-height: 20px;
    white-space: normal;
    overflow-wrap: break-word;

    .tips {
      position: absolute;
      top: 3px;
      right: 0;
      cursor: pointer;
    }
  }
}
</style>
